<template>
    <div class="heat">
        <!--地图-->
        <div id="myMap"></div>
        <!-- 头部区域 -->
        <header>
            <!-- 项目标题 -->
            <p class="title-name">
                <span>城市管理热力燃气管理平台</span>
            </p>
            <!-- 热力一张图 -->
            <div class="deadline-box">热力一张图</div>
            <!-- 燃气一张图 -->
            <div class="deadline-box1">燃气一张图</div>
            <!-- 头部背景图 -->
            <div class="header-bg"></div>
            <!-- 头部底端光点 -->
            <div class="bottom-light"></div>
            <!-- 中央“燃气热力一张图” -->
            <div class="center-text">热力燃气一张图</div>
            <!-- 右上角“展开”、“收起”按钮 -->
            <div class="collapse-box">
                <img id="openPage" src="../../assets/img/heat/open.png" alt="展开" @click="collapsePage(1)">
                <img id="closePage" src="../../assets/img/heat/close.png" alt="收起" @click="collapsePage(2)">
            </div>
        </header>
        <!-- 主体内容 -->
        <section class="main-box">
            <div class="content-area">
                <div class="left-title-name">
                    <span>热力</span>
                </div>
                <div class="right-title-name">
                    <span>燃气</span>
                </div>
                <div class="content-area-info">
                    <div class="left-content-row">
                        <!-- 热力相关 -->
                        <div class="border-box heat-relevant">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <ul class="number-statistic heat-number">
                                    <li>
                                        <p class="number-p">
                                            <span id="companyNumber">7</span>
                                            <span class="number-unit">个</span>
                                        </p>
                                        <p class="name-p">
                                            <span>热力公司</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p class="number-p">
                                            <span id="companyArea">1243</span>
                                            <span class="number-unit">万m³</span>
                                        </p>
                                        <p class="name-p">
                                            <span>热力公司</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p class="number-p">
                                            <span id="userNumber">556</span>
                                            <span class="number-unit">家</span>
                                        </p>
                                        <p class="name-p">
                                            <span>供热用户单位</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p class="number-p">
                                            <span id="caseNumber">556</span>
                                            <span class="number-unit">件</span>
                                        </p>
                                        <p class="name-p">
                                            <span>投诉案件量</span>
                                        </p>
                                    </li>
                                </ul>
                                <div class="heat-statistics">
                                    <div id="heatStatistics"></div>
                                    <p class="chart-name">热力公司用气量统计<span>（单位：万m³）</span></p>
                                </div>
                                <div class="complaint-statistics">
                                    <div class="complaint-number">
                                        <span id="allNumber">投诉总量：556件</span>
                                        <span class="space">/</span>
                                        <span id="resolved">已解决：268件</span>
                                        <span class="space">/</span>
                                        <span id="unresolved">未解决：123件</span>
                                        <span class="space">/</span>
                                        <span id="resolvedRate">解决率：56%</span>
                                    </div>
                                    <div id="complaintStatistics"></div>
                                    <p class="chart-name">投诉问题类型统计<span id="endTime">截止：2020年9月14日</span></p>
                                </div>
                                <div class="user-statistics">
                                    <div id="userStatistics"></div>
                                    <p class="chart-name">供热用户单位数量统计</p>
                                </div>
                                <div class="table-list user-list">
                                    <div class="table-head">
                                        <table>
                                            <tr>
                                                <td>公司名称</td>
                                                <td>管线长度</td>
                                                <td>锅炉</td>
                                                <td>交换站</td>
                                                <td>用户</td>
                                                <td>方式</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="userTable" class="table-body">
                                        <div id="userTableBox">
                                            <table>
                                                <tr>
                                                    <td>某某某热力公司</td>
                                                    <td>235km</td>
                                                    <td>32台</td>
                                                    <td>14座</td>
                                                    <td>1253户</td>
                                                    <td>天然气</td>
                                                </tr>
                                                <tr>
                                                    <td>某某某热力公司</td>
                                                    <td>235km</td>
                                                    <td>32台</td>
                                                    <td>14座</td>
                                                    <td>1253户</td>
                                                    <td>天然气</td>
                                                </tr>
                                                <tr>
                                                    <td>某某某热力公司</td>
                                                    <td>235km</td>
                                                    <td>32台</td>
                                                    <td>14座</td>
                                                    <td>1253户</td>
                                                    <td>天然气</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div id="userTableBox1"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="center-content-row"></div>
                    <div class="right-content-row">
                        <!-- 燃气 -->
                        <div class="border-box gas-relevant">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <ul class="number-statistic gas-number">
                                    <li>
                                        <p class="number-p">
                                            <span id="gasCompanyNumber">4</span>
                                            <span class="number-unit">家</span>
                                        </p>
                                        <p class="name-p">
                                            <span>天然气公司</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p class="number-p">
                                            <span id="gasUserArea">54</span>
                                            <span class="number-unit">家</span>
                                        </p>
                                        <p class="name-p">
                                            <span>供气用户</span>
                                        </p>
                                    </li>
                                </ul>
                                <div id="gasStatistics"></div>
                                <div class="table-list gas-list">
                                    <div class="table-head">
                                        <table>
                                            <tr>
                                                <td>公司名称</td>
                                                <td>管线长度</td>
                                                <td>调压站</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="gasTable" class="table-body">
                                        <div id="gasTableBox">
                                            <table>
                                                <tr>
                                                    <td>某某某燃气公司</td>
                                                    <td>235km</td>
                                                    <td>32个</td>
                                                </tr>
                                                <tr>
                                                    <td>某某某燃气公司</td>
                                                    <td>235km</td>
                                                    <td>32个</td>
                                                </tr>
                                                <tr>
                                                    <td>某某某燃气公司</td>
                                                    <td>235km</td>
                                                    <td>32个</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div id="gasTableBox1"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 液化气 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>液化气</span>
                        </div>
                        <div class="border-box liquid-gas">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <ul class="number-statistic liquid-number">
                                    <li>
                                        <p class="number-p">
                                            <span id="liquidComNum">4</span>
                                            <span class="number-unit">座</span>
                                        </p>
                                        <p class="name-p">
                                            <span>液化气站总数</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p class="number-p">
                                            <span id="haveNum">235</span>
                                            <span class="number-unit">个</span>
                                        </p>
                                        <p class="name-p">
                                            <span>自有钢瓶数量</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p class="number-p">
                                            <span id="intellectNum">235</span>
                                            <span class="number-unit">个</span>
                                        </p>
                                        <p class="name-p">
                                            <span>智能钢瓶数量</span>
                                        </p>
                                    </li>
                                </ul>
                                <div class="table-list liquid-list">
                                    <div class="table-head">
                                        <table>
                                            <tr>
                                                <td>液化气站名称</td>
                                                <td>自有钢瓶数量</td>
                                                <td>智能钢瓶数量</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="liquidTable" class="table-body">
                                        <div id="liquidTableBox">
                                            <table>
                                                <tr>
                                                    <td>某某某液化气站</td>
                                                    <td>32台</td>
                                                    <td>32台</td>
                                                </tr>
                                                <tr>
                                                    <td>某某某液化气站</td>
                                                    <td>32台</td>
                                                    <td>32台</td>
                                                </tr>
                                                <tr>
                                                    <td>某某某液化气站</td>
                                                    <td>32台</td>
                                                    <td>32台</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div id="liquidTableBox1"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 加气站 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>加气站</span>
                            <span id="stationNum">7座</span>
                        </div>
                        <div class="border-box gas-station">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="table-list station-list">
                                    <div class="table-head">
                                        <table>
                                            <tr>
                                                <td>液化气站</td>
                                                <td>公司名称</td>
                                                <td>地址</td>
                                                <td>所属街办</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="stationTable" class="table-body">
                                        <div id="stationTableBox">
                                            <table>
                                                <tr>
                                                    <td>某某某液化气站</td>
                                                    <td>某某液化气公司</td>
                                                    <td>丈八路56号</td>
                                                    <td>丈八</td>
                                                </tr>
                                                <tr>
                                                    <td>某某某液化气站</td>
                                                    <td>某某液化气公司</td>
                                                    <td>丈八路56号</td>
                                                    <td>丈八</td>
                                                </tr>
                                                <tr>
                                                    <td>某某某液化气站</td>
                                                    <td>某某液化气公司</td>
                                                    <td>丈八路56号</td>
                                                    <td>丈八</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div id="stationTableBox1"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: "Heat",
        data () {
            return {
                // 高德地图
                GDMap: null,
            }
        },
        methods: {
            /**
             * Description:高德地图初始化
             * Author:ybt
             * Date:2020/12/17
             */
            initMap() {
                this.GDMap = new AMap.Map("myMap", {
                    mapStyle: "amap://styles/6f8a9c431c03a423de43182d250f1a75",
                    zoom: 14,
                    viewMode: "3D",
                    center: [108.976877, 34.222629],
                    features: ["bg", "road", "building"],
                    resizeEnable: true
                });
                this.GDMap.setFitView();// 执行定位
            },
            /**
             * Description:监听“展开”、“收起”按钮操作
             * Author:ybt
             * Date:2020/12/17
             */
            collapsePage(type){
                if (type === 1) {
                    $('#openPage').css('display', 'none');
                    $('#closePage').css('display', 'block');
                    $('.left-content-row').css('transform', 'translateX(0px)');
                    $('.left-content-row').css('transition', 'transform 0.4s');
                    $('.right-content-row').css('transform', 'translateX(0px)');
                    $('.right-content-row').css('transition', 'transform 0.4s');
                    $('.left-title-name').css('transform', 'translateX(0px)');
                    $('.left-title-name').css('transition', 'transform 0.4s');
                    $('.right-title-name').css('transform', 'translateX(0px)');
                    $('.right-title-name').css('transition', 'transform 0.4s');
                } else if (type === 2) {
                    $('#openPage').css('display', 'block');
                    $('#closePage').css('display', 'none');
                    $('.left-content-row').css('transform', 'translateX(-600px)');
                    $('.left-content-row').css('transition', 'transform 0.4s');
                    $('.right-content-row').css('transform', 'translateX(600px)');
                    $('.right-content-row').css('transition', 'transform 0.4s');
                    $('.left-title-name').css('transform', 'translateX(-600px)');
                    $('.left-title-name').css('transition', 'transform 0.4s');
                    $('.right-title-name').css('transform', 'translateX(600px)');
                    $('.right-title-name').css('transition', 'transform 0.4s');
                }
            },
            /**
             * Description:初始化热力公司用气量统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initHeatChart(){
                let myChart = this.$echarts.init(document.getElementById('heatStatistics'));
                let option = {
                    grid: {
                        left: '3%',
                        right: '3%',
                        top: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['某某公司', '某某公司', '某某公司', '某某公司', '某某公司', '某某公司', '某某公司'],
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#4b8aaa'
                            }
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#1f98e5'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            // 坐标轴刻度标签
                            axisLabel: {
                                textStyle: {
                                    color: '#64cefe'
                                },
                                fontSize: 10,
                                verticalAlign: 'center'
                            },
                            // 坐标区域分割线
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#4b8aaa'
                                }
                            },
                            // 坐标轴轴线
                            axisLine: {
                                lineStyle: {
                                    color: '#1f98e5'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '任务量',
                            color: '#dc5a6c',
                            data: [200, 260, 300, 235, 180, 250, 250],
                            type: 'bar',
                            barWidth: '36px',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [12, 12, 0, 0]
                                }
                            }
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize',function () {
                    myChart.resize()
                })
            },
            /**
             * Description:初始化投诉总量统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initComplaintChart(){
                let myChart = this.$echarts.init(document.getElementById('complaintStatistics'));
                let option = {
                    grid: {
                        left: '3%',
                        right: '3%',
                        top: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['供热问题', '供热问题', '供热问题', '供热问题', '供热问题', '供热问题', '供热问题'],
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 13,
                            }
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: false
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#234690',
                                width: 2,
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#d6d5d3',
                                fontSize: 13,
                            }
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#234690',
                                width: 2,
                            }
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#234690',
                                width: 2,
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    series: [{
                        color: '#ffe24a',
                        data: [8.5, 5.8, 7, 5.9, 7.5, 8.5, 11],
                        type: 'line',
                        lineStyle: {
                            width: 6
                        },
                        symbolSize: 8
                    }]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize',function () {
                    myChart.resize()
                })
            },
            /**
             * Description:初始化供热用户单位数量统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initUserChart(){
                let myChart = this.$echarts.init(document.getElementById('userStatistics'));
                let option = {
                    grid: {
                        left: '3%',
                        right: '3%',
                        top: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['某某公司', '某某公司', '某某公司', '某某公司', '某某公司', '某某公司', '某某公司'],
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#4b8aaa'
                            }
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#1f98e5'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            // 坐标轴刻度标签
                            axisLabel: {
                                textStyle: {
                                    color: '#64cefe'
                                },
                                fontSize: 10,
                                verticalAlign: 'center'
                            },
                            // 坐标区域分割线
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#4b8aaa'
                                }
                            },
                            // 坐标轴轴线
                            axisLine: {
                                lineStyle: {
                                    color: '#1f98e5'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '任务量',
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#f67702' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#210851' // 100% 处的颜色
                            }], false),
                            data: [200, 260, 300, 235, 180, 250, 250],
                            type: 'bar',
                            barWidth: '32px',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [12, 12, 0, 0]
                                }
                            }
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize',function () {
                    myChart.resize()
                })
            },
            /**
             * Description:供热用户单位数量列表滚动效果
             * Author:ybt
             * Date:2020/12/17
             */
            userListScrolling(){
                let speed = 60;
                document.getElementById("userTableBox1").innerHTML = document.getElementById("userTableBox").innerHTML;
                function Marquee() {
                    if (document.getElementById("userTableBox1").offsetHeight - document.getElementById("userTable").scrollTop <= 0) {
                        document.getElementById("userTable").scrollTop -= document.getElementById("userTableBox").offsetHeight;
                    } else {
                        document.getElementById("userTable").scrollTop++;
                    }
                }
                let MyMar = setInterval(Marquee, speed);
                document.getElementById("userTable").onmouseover = function() {
                    clearInterval(MyMar);
                };
                document.getElementById("userTable").onmouseout = function() {
                    MyMar = setInterval(Marquee, speed);
                }
            },
            /**
             * Description:初始化天然气公司统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initGasChart () {
                let colorIndex = 0;
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("gasStatistics"));
                let option = {
                    grid: {
                        left: '0%',
                        right: '10%',
                        bottom: '-10%',
                        top: '0%',
                        containLabel: true
                    },
                    xAxis: [{
                        splitLine: {
                            show: false
                        },
                        type: 'value',
                        show: false,
                    }],
                    yAxis: [{
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: () => {
                                    if (colorIndex === 4) {
                                        colorIndex = 0;
                                    }
                                    colorIndex ++;
                                    let colors = ['#ff6363', '#ff8463', '#ffb463', '#ffe763'];
                                    return colors[colorIndex - 1]
                                }, //每个数据的颜色
                                fontWeight: "bold",
                                fontSize: 14,
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        data: ["某某天然气公司", "某某天然气公司", "某某天然气公司", "某某天然气公司"]
                    }],
                    series: [{
                        type: 'bar',
                        barWidth: 11, // 柱子宽度
                        label: {
                            show: true,
                            position: 'right', // 位置
                            fontSize: 16,
                            fontWeight: 'bold', // 加粗
                            distance: 10, // 距离
                            formatter: (params) => {
                                return params.value + '家'
                            }
                        },
                        // 柱子上方的数值
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 5, 5, 0], // 圆角（左上、右上、右下、左下）
                                color: (params) => {
                                    let colors = ['#ff6363', '#ff8463', '#ffb463', '#ffe763'];
                                    return colors[params.dataIndex]
                                }
                            }
                        },
                        data: [25, 16, 12, 9]
                    }]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", () =>  {
                    myChart.resize();
                });
            },
            /**
             * Description:燃气公司列表滚动效果
             * Author:ybt
             * Date:2020/12/17
             */
            gasListScrolling(){
                let speed = 40;
                document.getElementById("gasTableBox1").innerHTML = document.getElementById("gasTableBox").innerHTML;
                function Marquee() {
                    if (document.getElementById("gasTableBox1").offsetHeight - document.getElementById("gasTable").scrollTop <= 0) {
                        document.getElementById("gasTable").scrollTop -= document.getElementById("gasTableBox").offsetHeight;
                    } else {
                        document.getElementById("gasTable").scrollTop++;
                    }
                }
                let MyMar = setInterval(Marquee, speed);
                document.getElementById("gasTable").onmouseover = function() {
                    clearInterval(MyMar);
                };
                document.getElementById("gasTable").onmouseout = function() {
                    MyMar = setInterval(Marquee, speed);
                }
            },
            /**
             * Description:液化气站列表滚动效果
             * Author:ybt
             * Date:2020/12/17
             */
            liquidListScrolling(){
                let speed = 40;
                document.getElementById("liquidTableBox1").innerHTML = document.getElementById("liquidTableBox").innerHTML;
                function Marquee() {
                    if (document.getElementById("liquidTableBox1").offsetHeight - document.getElementById("liquidTable").scrollTop <= 0) {
                        document.getElementById("liquidTable").scrollTop -= document.getElementById("liquidTableBox").offsetHeight;
                    } else {
                        document.getElementById("liquidTable").scrollTop++;
                    }
                }
                let MyMar = setInterval(Marquee, speed);
                document.getElementById("liquidTable").onmouseover = function() {
                    clearInterval(MyMar);
                };
                document.getElementById("liquidTable").onmouseout = function() {
                    MyMar = setInterval(Marquee, speed);
                }
            },
            /**
             * Description:加气站列表滚动效果
             * Author:ybt
             * Date:2020/12/17
             */
            stationListScrolling(){
                let speed = 40;
                document.getElementById("stationTableBox1").innerHTML = document.getElementById("stationTableBox").innerHTML;
                function Marquee() {
                    if (document.getElementById("stationTableBox1").offsetHeight - document.getElementById("stationTable").scrollTop <= 0) {
                        document.getElementById("stationTable").scrollTop -= document.getElementById("stationTableBox").offsetHeight;
                    } else {
                        document.getElementById("stationTable").scrollTop++;
                    }
                }
                let MyMar = setInterval(Marquee, speed);
                document.getElementById("stationTable").onmouseover = function() {
                    clearInterval(MyMar);
                };
                document.getElementById("stationTable").onmouseout = function() {
                    MyMar = setInterval(Marquee, speed);
                }
            }
        },
        mounted(){
            document.title = "城市管理热力燃气管理平台";
            // 初始化高德地图
            this.initMap();
            // 初始化热力公司用气量统计图
            this.initHeatChart();
            // 初始化投诉总量统计图
            this.initComplaintChart();
            // 初始化供热用户单位数量统计图
            this.initUserChart();
            // 供热用户单位数量列表滚动效果
            this.userListScrolling();
            // 初始化天然气公司统计图
            this.initGasChart();
            // 燃气公司列表滚动效果
            this.gasListScrolling();
            // 液化气站列表滚动效果
            this.liquidListScrolling();
            // 加气站列表滚动效果
            this.stationListScrolling();
        }
    }
</script>

<style lang="less">
    .heat{
        width: 100%;
        height: 1080px;
        display: flex;
        flex-direction: column;
        background-color: #04093f;
        line-height: 1.15;
        position: relative;
        overflow-x: hidden;
        cursor: default;
        user-select: none;
        #myMap {
            width: 24rem;
            height: 13.5rem;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        /* 头部样式 */
        header {
            height: 1.375rem; // 110px
            padding-top: 0.32rem;
            position: relative;
            background: linear-gradient(to bottom, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.9));
            z-index: 99;
            .title-name{
                height: 1.125rem;
                line-height: 1.125rem;
                text-align: center;
                span {
                    font-size: 0.6875rem;
                    /* 引入外部字体样式 */
                    font-family: 'MF-FangHei';
                    background: linear-gradient(to right, #0178f7, #00ebfe, #00ebfe, #00a9ff);
                    -webkit-background-clip: text;
                    color: transparent;
                }
            }
            .deadline-box{
                position: absolute;
                left: 0.25rem;
                top: 0.3rem;
                width: 2.7875rem;
                height: 0.525rem;
                line-height: 0.525rem;
                text-align: center;
                color:#08faf5;
                font-family: 'FZLTZH_GBK';
                font-size: 0.22rem;
                background: url(../../assets/img/heat/small-border.png) no-repeat;
                z-index: 100;
            }
            .deadline-box1{
                position: absolute;
                left: 3.1rem;
                top: 0.3rem;
                width: 2.7875rem;
                height: 0.525rem;
                line-height: 0.525rem;
                text-align: center;
                color:#08faf5;
                font-family: 'FZLTZH_GBK';
                font-size: 0.22rem;
                background: url(../../assets/img/heat/small-border.png) no-repeat;
                z-index: 100;
            }
            .header-bg{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 0.7375rem;
                background: url(../../assets/img/heat/header-border.png) no-repeat;
                background-size: 100% 100%;
            }
            .bottom-light{
                position: absolute;
                bottom: -0.8125rem;
                left: calc(50% - 4.7875rem);
                width: 9.5875rem;
                height: 1.6625rem;
                background: url(../../assets/img/heat/big-light.png) no-repeat;
                background-size: 100% 100%;
                z-index: 100;
            }
            .center-text{
                position: absolute;
                left: calc(50% - 2.05rem);
                top: 1.35rem; // 108px
                width: 4.1rem;
                height: 0.7625rem;
                line-height: 0.7625rem;
                text-align: center;
                color:#08faf5;
                font-family: 'FZLTZH_GBK';
                font-size: 0.35rem;
                background: url(../../assets/img/heat/big-border.png) no-repeat;
            }
            .collapse-box{
                position: absolute;
                top: 0.15rem;
                right: 0.275rem;
                img{
                    width: 0.4rem; // 32px
                    height: 0.325rem; // 26px
                    cursor: pointer;
                }
                #openPage{
                    display: none;
                }
                #closePage{
                    display: block;
                }
            }
        }

        /* 主体内容样式 */
        .main-box{
            display: flex;
            flex: 1;
            font-family: 'FZLTZH_GBK';
            .content-area{
                display: flex;
                flex: 1;
                position: relative;
                .left-title-name{
                    position: absolute;
                    left: 0.25rem;
                    top: -0.7875rem;
                    width: 7.15rem;
                    height: 0.975rem;
                    background: url(../../assets/img/heat/left-title.png) no-repeat;
                    background-size: 100% 100%;
                    color: #08faf5;
                    font-size: 0.2625rem;
                    z-index: 100;
                    span{
                        position: absolute;
                        bottom: 0.1375rem;
                        left: 3.125rem; // 250px
                    }
                }
                .right-title-name{
                    position: absolute;
                    right: 0.25rem;
                    top: -0.7875rem;
                    width: 7.15rem;
                    height: 0.975rem;
                    background: url(../../assets/img/heat/right-title.png) no-repeat;
                    background-size: 100% 100%;
                    color: #08faf5;
                    font-size: 0.2625rem;
                    z-index: 100;
                    span{
                        position: absolute;
                        bottom: 0.1375rem;
                        right: 2.85rem; // 228px
                    }
                }
            }
            .content-area-info{
                display: flex;
                flex-direction: row;
                flex: 1;
                overflow: hidden;
                /* 主体内容公共样式——开始 */
                .border-box{
                    border: 1px solid #18397b;
                    position: relative;
                    margin-top: 0.125rem;
                    .top-light-img{
                        position: absolute;
                        top: 0;
                        left: calc(50% - 3.5rem);
                        width: 7rem;
                        height: 0.9625rem;
                        background: url(../../assets/img/heat/light1.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    .bottom-light-img{
                        position: absolute;
                        top: -0.4125rem;
                        left: calc(50% - 2.9375rem);
                        width: 6.2125rem;
                        // width: 5.875rem;
                        height: 0.975rem;
                        background: url(../../assets/img/heat/light2.png) no-repeat;
                        background-size: 100% 100%;
                        z-index: -1;
                    }
                    .overflow-box{
                        position: relative;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                        font-size: 0.2325rem;
                        /* 选中的切换块样式 */
                        .switch-block-active{
                            font-size: 0.2325rem;
                            color: #23bcef;
                        }
                        /* 未选中的切换块样式 */
                        .switch-block-no{
                            font-size: 0.2rem;
                            color:#ceced5;
                        }
                    }
                    // 表格样式
                    .table-list{
                        width: 100%;
                        height: 1.875rem; // 150px
                        overflow: hidden;
                        .table-head{
                            color:#ff6363;
                            height: 0.625rem; // 50px
                            line-height: 0.625rem;
                            tr{
                                height: 0.625rem;
                                line-height: 0.625rem;
                            }
                        }
                        .table-body{
                            height: 1.75rem; // 140px
                            color: #fff;
                            overflow: hidden;
                            tr{
                                height: 0.625rem;
                                line-height: 0.625rem;
                            }
                        }
                    }
                    .table-head,.table-body{
                        font-size: 0.2rem;
                        text-align: center;
                        table{
                            border-collapse: collapse;
                        }
                    }

                    // 块元素样式
                    .number-statistic{
                        display: flex;
                        flex-direction: row;
                        height: 1.25rem; // 100px
                        padding: 0.2rem; // 16px
                        border-bottom: 1px solid #18397b;
                        li{
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            flex: 1;
                            font-size: 0.2rem;
                            color: #ffffff;
                            .number-p{
                                text-align: center;
                                span:first-of-type{
                                    color: #ff6363;
                                    font-size: 0.3rem;
                                }
                            }
                            .name-p{
                                text-align: center;
                                line-height: 0.325rem;
                            }
                        }
                        li + li{
                            border-left: 1px solid #14428a;
                        }
                    }
                }
                /* 小标题名称样式 */
                .every-title-name{
                    position: relative;
                    width: 100%;
                    height: 0.575rem;
                    line-height: 0.575rem;
                    text-align: center;
                    color: #08faf5;
                    font-size: 0.2625rem;
                    #stationNum{
                        position: absolute;
                        right: 2.5rem; // 200px
                        color: #dc5a6c;
                    }
                }
                /* 主体内容公共样式——结束 */
                .left-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 7.4rem;
                    padding: 0.1875rem 0 0.1875rem 0.25rem;
                    background: linear-gradient(to right, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.85));
                    z-index: 10;
                    .chart-name{
                        position: relative;
                        font-size: 0.2rem;
                        color: #dc5a6c;
                        text-align: center;
                        font-weight: bold;
                        line-height: 0.55rem; // 44px
                        span{
                            font-size: 0.15rem;
                        }
                        #endTime{
                            position: absolute;
                            right: 0.25rem;
                        }
                    }
                    /* 热力 */
                    .heat-relevant{
                        display: flex;
                        flex-direction: column;
                        height: 11.625rem; // 930px
                        .heat-statistics{
                            width: 100%;
                            height: 2.525rem; // 202px
                            border-bottom: 1px solid #18397b;
                            #heatStatistics{
                                width: 100%;
                                height: 1.95rem;
                            }
                        }
                        .complaint-statistics{
                            width: 100%;
                            height: 3.4375rem; // 275px
                            border-bottom: 1px solid #18397b;
                            .complaint-number{
                                display: flex;
                                flex-direction: row;
                                flex-wrap: nowrap;
                                justify-content: center;
                                color: #ffffff;
                                font-size: 0.2rem;
                                // font-weight: 600;
                                line-height: 0.575rem;
                                #allNumber{
                                    color: #dc5a6c;
                                }
                                .space{
                                    padding: 0 0.125rem;
                                }
                            }
                            #complaintStatistics{
                                width: 100%;
                                height: 2.3rem; // 184px
                            }
                        }
                        .user-statistics{
                            width: 100%;
                            height: 2.55rem; // 204px
                            border-bottom: 1px solid #18397b;
                            #userStatistics{
                                width: 100%;
                                height: 2rem; // 160px
                            }
                        }
                        .user-list{
                            table{
                                border-collapse: collapse;
                                tr {
                                    td{
                                        font-weight: normal !important;
                                        border-bottom: 1px solid #18397b;
                                        padding: 0 0.125rem;

                                    }
                                    td:nth-of-type(1){
                                        width: 1.9375rem; // 155px
                                        max-width: 1.9375rem;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }
                                    td:nth-of-type(2){
                                        width: 1.125rem; // 90px
                                    }
                                    td:nth-of-type(3){
                                        width: 1.0125rem; // 81px
                                    }
                                    td:nth-of-type(4){
                                        width: 1.0125rem; // 81px
                                    }
                                    td:nth-of-type(5){
                                        width: 1.025rem; // 82px
                                    }
                                    td:nth-of-type(6){
                                        width: 1.0125rem; // 81px
                                    }
                                }
                            }
                        }
                    }
                }
                .center-content-row{
                    flex: 1;
                    // width: 9.125rem; // 730px
                }
                .right-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 7.4rem;
                    padding: 0.1875rem 0.25rem 0.1875rem 0;
                    background: linear-gradient(to left, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.85));
                    z-index: 10;
                    // 燃气
                    .gas-relevant{
                        #gasStatistics{
                            height: 1.75rem; // 140px
                            padding: 10px 20px 0px 20px;
                            border-bottom: 1px solid #18397b;
                        }
                        .gas-list{
                            table{
                                border-collapse: collapse;
                                tr {
                                    td{
                                        font-weight: normal !important;
                                        border-bottom: 1px solid #18397b;
                                        padding: 0 0.125rem;
                                    }
                                    td:nth-of-type(1){
                                        width: 3rem; // 240px
                                        max-width: 3rem;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }
                                    td:nth-of-type(2){
                                        width: 2.0625rem; // 165px
                                    }
                                    td:nth-of-type(3){
                                        width: 2.0625rem; // 165px
                                    }
                                }
                            }
                        }
                    }
                    .liquid-gas{
                        .liquid-list{
                            table{
                                border-collapse: collapse;
                                tr {
                                    td{
                                        font-weight: normal !important;
                                        border-bottom: 1px solid #18397b;
                                        padding: 0 0.125rem;
                                    }
                                    td:nth-of-type(1){
                                        width: 3rem; // 240px
                                        max-width: 3rem;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }
                                    td:nth-of-type(2){
                                        width: 2.0625rem; // 165px
                                    }
                                    td:nth-of-type(3){
                                        width: 2.0625rem; // 165px
                                    }
                                }
                            }
                        }
                    }
                    .gas-station{
                        .station-list{
                            table{
                                border-collapse: collapse;
                                tr {
                                    td{
                                        font-weight: normal !important;
                                        border-bottom: 1px solid #18397b;
                                        padding: 0 0.125rem;

                                    }
                                    td:nth-of-type(1){
                                        width: 2.125rem; // 170px
                                        max-width: 2.125rem;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }
                                    td:nth-of-type(2){
                                        width: 2.125rem; // 170px
                                        max-width: 2.125rem;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }
                                    td:nth-of-type(3){
                                        width: 1.5625rem; // 125px
                                        max-width: 1.5625rem;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }
                                    td:nth-of-type(4){
                                        width: 1.3125rem; // 105px
                                        max-width: 1.3125rem;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
